<template>
  <el-dialog
    v-model="showDialog"
    top="30vh"
    custom-class="loginDialog"
    modal-class="modalDialog"
    :width="props.size"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="loginMain">
      <img src="@/assets/images/login/icon.png" alt="" class="headerIcon" />
      <div class="loginMainLeft"></div>
      <div class="loginMainRight">
        <div class="title">
          <span class="h3">欢迎登录</span>
          <span class="h6">智明矿通大模型</span>
        </div>
        <div class="inputButtonMain">
          <el-input
            v-model="formState.username"
            class="username"
            placeholder="请输入用户名"
            clearable
            :prefix-icon="User"
            @keyup.enter.native="handleLogin"
          />
          <el-input
            v-model="formState.password"
            class="password"
            placeholder="请输入密码"
            type="password"
            :prefix-icon="Lock"
            show-password
            @keyup.enter.native="handleLogin"
          />
          <div class="rememberMain">
            <el-checkbox
              v-model="rememberPassword"
              @change="changeRememberPassword"
            >
              <span style="font-size: 14px">记住密码</span>
            </el-checkbox>
            <div style="flex: 1"></div>
            <span @click="forgetPwd" class="forgetThePassword">忘记密码？</span>
          </div>
          <el-button
            type="primary"
            :disabled="submitStatus"
            @click="handleLogin"
            class="loginButton"
          >
            登录
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
  
  <script lang="ts" setup>
import { ref, nextTick, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import { loginApi } from "@/apis/login";
const props = defineProps({
  // 弹窗大小
  size: {
    type: String || Number,
    default: "938",
  },
});

// 表单
const formState = reactive({
  username: localStorage.getItem("username"),
  password: localStorage.getItem("password"),
});

const rememberPassword = ref(
  JSON.parse(localStorage.getItem("rememberPassword")) || false
);

// 监听提交按钮状态
const submitStatus = ref(true);
watch(
  () => [formState.username, formState.password],
  ([newUsername, newPassword]) => {
    submitStatus.value = !newUsername || !newPassword;
  },
  { immediate: true }
);

// 方法 打开窗口
const showDialog = ref(false);
watch(showDialog, (newV) => {
  if (newV) {
    nextTick(() => {
      formState.username = localStorage.getItem("username");
      formState.password = localStorage.getItem("password");
      rememberPassword.value = localStorage.getItem("rememberPassword") || false;
    })
  }
}, {immediate: true});
const handDialog = () => {
  showDialog.value = true;
};
// 记住密码
const changeRememberPassword = () => {

}
const forgetPwd = () => {
  ElMessage.error("请联系管理员重置密码！");
}
// 提交
const emit = defineEmits(["handleOk"]);
function handleLogin() {
  // axios
  //   .post("", formState, {
  //     timeout: 5000, // 设置超时时间为5秒
  //   })
  //   .then((res) => {
  //     if (res.data.code == 200) {
  //       if (rememberPassword.value) {
  //         localStorage.setItem("username", formState.username);
  //         localStorage.setItem("password", formState.password);
  //         localStorage.setItem("rememberPassword", rememberPassword.value);
  //       } else {
  //         localStorage.removeItem("username");
  //         localStorage.removeItem("password");
  //         localStorage.removeItem("rememberPassword");
  //       }

  //       sessionStorage.setItem("token", res.data.result.token);
  //     } else {
  //       ElMessage.error(res.data.message);
  //     }
  //   })
  //   .catch((err) => {
  //     if (err.message.includes("timeout")) {
  //       ElMessage.error("请检查设置的服务器地址是否正确或服务器是否正常运行!");
  //     } else {
  //       ElMessage.error("请检查设置的服务器地址是否正确或服务器是否正常运行!");
  //     }
  //   });

    loginApi(formState).then((res) => {
      if (res.code == 200) {
        if (rememberPassword.value) {
          localStorage.setItem("username", formState.username);
          localStorage.setItem("password", formState.password);
          localStorage.setItem("rememberPassword", rememberPassword.value);
        } else {
          localStorage.removeItem("username");
          localStorage.removeItem("password");
          localStorage.removeItem("rememberPassword");
        }
        sessionStorage.setItem("userInfo", JSON.stringify(res.result.userInfo));
        sessionStorage.setItem("token", res.result.token);
        showDialog.value = false;
        emit("handleOk");
      } else {
        ElMessage.error(res.message);
      }
    })
    .catch((err) => {
      if (err.message.includes("timeout")) {
        ElMessage.error("请检查设置的服务器地址是否正确或服务器是否正常运行!");
      } else {
        ElMessage.error("请检查设置的服务器地址是否正确或服务器是否正常运行!");
      }
    });
}
// 暴漏给父组件
defineExpose({ handDialog });
</script>
  
<style lang="scss" scpoed>
.loginMain {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 16px;
  background: url("@/assets/images/login/bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.headerIcon {
  position: absolute;
  right: 30.69px;
  top: -80px;
  width: 191.6px;
  height: 178.8px;
  opacity: 1;
  // box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.06);
}
.loginMainLeft,
.loginMainRight {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.loginMainRight {
  padding: 130px 54.5px 0 54.5px;
}
.title {
  margin-bottom: 20px;
}
.h3 {
  font-family: PingFang SC, PingFang SC-Regular;
  font-size: 32px;
  color: #333;
  font-weight: 500;
  margin-right: 10px;
}
.h6 {
  font-family: PingFang SC, PingFang SC-Regular;
  font-size: 18px;
  color: #595959;
}

.username,
.password {
  height: 52px;
  margin-bottom: 20px;
}
.username .el-input__inner,
.password .el-input__inner {
  height: 50px;
  font-size: 16px;
}
.username .el-input__prefix,
.password .el-input__prefix,
.username .el-input__suffix,
.password .el-input__suffix {
  font-size: 16px;
}
.password .el-input__icon,
.username .el-input__icon {
  font-size: 16px !important;
}

.rememberMain {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}
.forgetThePassword {
  font-size: 14px;
  cursor: pointer;
  color: #3e6ff1;
}
.loginButton.el-button--primary {
  font-size: 18px;
  width: 100%;
  height: 60px;
  background: #2d65f7;
}
.loginButton.el-button.is-disabled,
.loginButton.el-button.is-disabled:focus,
.loginButton.el-button.is-disabled:hover {
  background: rgb(150, 178, 251);
}
// 遮罩下模糊
.modalDialog {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
</style>